<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 
        特点:将异步代码可以以同步方式去编写
       async await
       1:去掉.then  在.then前的方法加一个await
       2:定义一个变量用于接收.then返回值  const res= await 方法()
       3:在await最近的父级方法加一个async
       try{
             //可能出错的代码
       }catch(error){
             //error就是相应的错误信息
             如果不想要error  (error)整个删除
         //如果出错了就执行这里
       } 

         -->
      <button @click="getData">点我调用接口请求</button>
    </div>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {},
        methods: {
          async getData () {
            let res = ''
            try {
              res = await axios({
                url: 'http://localhost:1337/articles/technic123'
              })
            } catch {
              window.console.log('出错了')
            }
            window.console.log(1)
            window.console.log(res)
            window.console.log(2)
          }
        }
      })
    </script>
  </body>
</html>
